<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘贝商城</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<!--    &lt;!&ndash;线上 validator 校验 js 文件&ndash;&gt;
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    &lt;!&ndash;线上支持中文校验 js 文件&ndash;&gt;
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
</head>
<style>
    .navbar-inverse{
        height: 35px;
        font-size: 6px;
    }
    #div1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 910px;
        margin-left: 192px;
        margin-top: 40px;
    }
    #div2{
        overflow: hidden;
        /*border: red solid 1px;*/
        float: left;
        height: 80px;
        width: 150px
    }
    #div3{
        /*border: red solid 1px;*/
        float: left;
        margin-left: 20px;
        font-size: 18px;
        height: 80px;
        width: 350px;
        font-weight:500;
        color: #4a4a4a;
        padding-top: 25px;
        font-family:微软雅黑;
    }
    .span1{
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    .span1:hover{
        font-weight: bold;
    }
    .input1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 300px;
        padding-top: 22px;
        float: right;
        color: #FFFFFF;

    }
    #button_id{
        float: right;
        width: 70px;
        height: 34px;
        background-color: #ff6e39;
        border: 0px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px #888888;
    }
    #div4{
        margin-left: 190px;

        width: 910px;
        height: 250px;
        overflow: hidden;
    }
    .div5{
         /*border: red solid 1px;*/
         height: 50px;
         width: 150px;
         margin-left: 190px;
         font-size: 19px;
         padding-top: 12px;
     }
    .div6{
        margin-left: 190px;
        /*border: red solid 1px;*/
        width: 910px;
        height: 325px;
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    #div4:hover{
        /*等比例放大*/
        /*transform: scale();*/
    }
    .div6_1{
        /*border: red solid 1px;*/
        border-top: #ff6e39 solid 2px;
        /*background-color: #fafafa;*/
        float: left;
        width: 200px;
        height: 300px;
        margin-left: 13px;
        margin-right: 13px;
        margin-bottom: 10px;
    }
    .div6_1:hover{
        transform: scale(1.02);
    }
    .a2{
        margin-top: 0px;
        padding-right:0px;
        color: #eb9e9b
    }
    .a2:hover{
        color: #eb565f;
    }

    .typeClass{
        margin-left: 10px;
    }

    .hidden_div{
        display: none;
    }

    .show_div{
        display: block;
    }
</style>
<body>
    <div id="app">
        <nav class=" navbar-inverse navbar-fixed-top">
            <div class="container-fluid" >
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class=""><a href="./userIndex4.html" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                        <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                        <li><a href="./store/index.html" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"  style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">数码电子</a></li>
                                <li><a href="#">食品</a></li>
                                <li><a href="#">生活用品</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">服装 | 男装 | 女装</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">厨具用品</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#" v-if="user == null" @click="loginVisible = true"  class="a2" data-toggle="modal" data-target="#exampleModal" style="padding-top: 7px;">亲，请登录</a>
                            <a href="#" v-else @click="toInfo"  class="a2" data-toggle="modal" style="padding-top: 7px;" data-target="#exampleModal">欢迎您，{{user.username}}</a>
                        </li>
                        <li>
                            <a v-if="user == null" href="./register.html" style="padding-top: 7px;margin-top: 0px;">注册</a>
                            <a v-else @click="logout" style="padding-top: 7px;margin-top: 0px;cursor: pointer">注销</a>
                        </li>
                        <li><a href="#" @click="cartBtn" class="gouwu"  data-toggle="modal" data-target="#exampleModal" id="a3" style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车(<span id="nums" style="color: #eb9e9b">{{cartNumber}}</span>)</a>
                        </li>
                        <li><a id="time" data-toggle="modal" data-target="#exampleModal"></a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="div1">
            <div id="div2">
                <a href="userIndex4.html"><img src="asscerts/img/taobeilogo.jpg" style="height: 250px;margin-top: -85px;margin-left: -30px"></a>
            </div>
            <div id="div3">
                <!-- 遍历展示类型 -->
                <span v-for="(item,index) in productList" :class="{typeClass:index!=0}" @click="getProductListByTypeId(item)" class="span1">{{item.name}}</span>
            </div>
            <div class="form-group input1">
                <input type="text" class="form-control " style="width: 220px;float: left" placeholder="幸福生活，搜索一下" name="username" id="username">
                <input id="button_id" type="button" value="搜索" style="">
            </div>
        </div>
        <div id="div4">
            <iframe align="center" width="100%" height="100%" src="Demo01.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>


        <div id="content_body" :class="[showFlag==0?'show_div':'hidden_div']">
            <div v-for="(items,index) in productList">
                <!-- 遍历展示各类商品信息 -->
                <div class="div5">
                    <span>{{items.name}}  ></span>
                </div>
                <div class="div6">
                    <div class="div6_1" v-for="(item,index) in items.productList" @click="addProductId(item)">
                        <div>
                            <el-image :src="item.url" style="width: 200px"></el-image>
                        </div>
                        <div style="text-align: center; margin-top: -8px;font-size: 15px">{{item.name}}</div>
                        <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0;height: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.context}}</p></div>
                        <div style="color: red;font-size: 15px;text-align: center">{{item.price}}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 当用户点击商品类型时显示对应商品类型下的所有商品 -->
        <div :class="[showFlag==1?'show_div':'hidden_div']">
            <div class="div5">
                <span>{{viewProductType.name}}  ></span>
            </div>
            <div class="div6">
                <div class="div6_1" v-for="(item,index) in viewProductType.productList" @click="addProductId(item)">
                    <div>
                        <el-image :src="item.url" style="width: 200px"></el-image>
                    </div>
                    <div style="text-align: center; margin-top: -8px;font-size: 15px">{{item.name}}</div>
                    <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0;height: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.context}}</p></div>
                    <div style="color: red;font-size: 15px;text-align: center">{{item.price}}</div>
                </div>
            </div>
        </div>


        <el-dialog
                title="登录"
                :visible.sync="loginVisible"
                width="30%"
                :close-on-click-modal="false"
                :before-close="handleClose"
        >
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="手机号登录" name="first">
                    <!-- 手机号登录表单 -->
                    <el-form :rules="loginRules" ref="loginForm" :model="loginForm" label-width="80px">
                        <el-form-item prop="tel" label="手机号">
                            <el-input style="width: 50%" v-model="loginForm.tel"></el-input>
                        </el-form-item>
                        <el-form-item prop="password" label="密码">
                            <el-input type="password" style="width: 50%" v-model="loginForm.password"></el-input>
                        </el-form-item>
                        <el-form-item prop="verifyCode" label="验证码">
                            <el-input v-model="loginForm.verifyCode" style="width: 50%"></el-input>
                            <img @click="flushCode" id="img_code" :src="codeUrl" />
                        </el-form-item>
                        <el-form-item>
                            <div>{{telMsg}}</div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="telLogin">登录</el-button>
                            <el-button @click="loginVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="邮箱验证登录" name="second">
                    <!-- 邮箱登录表单 -->
                    <el-form :rules="emailRules" ref="emailLoginForm" :model="emailLoginForm" label-width="80px">
                        <el-form-item prop="tel" label="手机号">
                            <el-input style="width: 50%" v-model="emailLoginForm.tel"></el-input>
                        </el-form-item>
                        <el-form-item prop="code" label="验证码">
                            <el-input v-model="emailLoginForm.code" style="width: 50%"></el-input>
                            <el-button @click="getVerifyCode" v-if="countFlag" style="width: 40%">发送验证码</el-button>
                            <el-button v-else style="width: 40%">剩余{{countNum}}发送</el-button>
                        </el-form-item>
                        <el-form-item>
                            <div>{{emailMsg}}</div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="emailLogin">登录</el-button>
                            <el-button @click="loginVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
            </el-tabs>
        </el-dialog>

    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                telMsg: '',
                emailMsg: '',
                showFlag: 0,    //0默认展示，1展示根据商品类型获取的商品信息
                viewProductType: {},
                codeUrl: '/taobei_web/user/verifyCode',
                productList: [],
                name: '123',
                loginVisible: false,
                activeName: 'first',
                loginForm: {
                    tel: '',
                    password: '',
                    verifyCode: ''
                },
                emailLoginForm: {
                    tel: '',
                    code: ''
                },
                countNum: 180, // 倒计时秒数
                countFlag: true,
                loginRules: {
                    tel: [
                        {required: true, message: "请输入手机号", trigger: "blur"},
                        {
                            pattern: /^1[34578]\d{9}$/,
                            message: "请输入正确手机号",
                            trigger: "blur"
                        }
                    ],
                    password: [{required: true, message: "请输入密码", trigger: "blur"}],
                    verifyCode: [{required: true, message: "请输入验证码", trigger: "blur"}]
                },
                emailRules: {
                    tel: [{required: true, message: "请输入手机号", trigger: "blur"}],
                    code: [{required: true, message: "请输入验证码", trigger: "blur"}]
                },
                typeList: [],
                cartNumber: 0
            },
            methods: {
                getProductListByTypeId(item) {
                    //先设置展示指定类型的所有商品
                    this.showFlag = 1
                    console.log(item)
                    let self = this;
                    //向后端发送请求
                    $.ajax({
                        url: '/taobei_web/pro/getProductListByTypeId',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            id: item.id
                        },
                        success(data) {
                            self.viewProductType = data.data
                        }
                    })
                },
                cartBtn() {
                    //先判断是否已经登录，如果没登录，显示弹框让用户登录
                    if (JSON.parse(window.sessionStorage.getItem("user")) == null){
                        //未登录
                        this.loginVisible =  true;
                    }else{
                        //登录了就跳转到购物车页面
                        location.href = "./cart.html"
                    }
                },
                initCartNumber() {
                    let self = this;
                    $.ajax({
                        url:"/taobei_web/cart/getCartSum",
                        type:"get",
                        dataType:"json",
                        success:function (data) {
                            if (data.status == 200) {
                                self.cartNumber = data.data.nums
                            }
                        }
                    })
                },
                logout() {
                  //清除本地存储的用户信息
                    window.sessionStorage.removeItem("user")
                    //重新初始化购物车商品数量
                    this.cartNumber = 0
                    //发请求让服务器清除session中保存的用户信息
                    $.ajax({
                        url: '/taobei_web/user/logout',
                        type: 'get',
                        dataType: 'json',
                        success(data) {
                            if (data.status == 200){
                                //重新刷新首页
                                location.reload()
                            }
                        }
                    })
                },
                toInfo() {
                    //跳转到个人中心页面
                    location.href = './info4.html'
                },
                flushCode() {
                    //刷新验证码
                    this.codeUrl = "/taobei_web/user/verifyCode?t"+new Date().getSeconds()
                },
                telLogin() {
                    //先判断表单是否符合条件
                    this.$refs['loginForm'].validate(valid => {
                        if (valid){
                            //表单验证通过发起登录请求
                            //手机号登录
                            let self = this;
                            $.ajax({
                                url: '/taobei_web/user/login',
                                type: 'post',
                                dataType: 'json',
                                data: self.loginForm,
                                success(data) {
                                    if (data.status == 200){
                                        //登录成功，将用户信息保存到本地
                                        window.sessionStorage.setItem("user", JSON.stringify(data.data));
                                        //获取购物车商品数量显示
                                        self.initCartNumber()
                                        //弹出框隐藏
                                        self.loginVisible = false
                                        //重新加载首页，刷新显示用户名
                                        location.reload()
                                    }else{
                                        //将错误信息提示给用户看
                                        self.telMsg = data.msg
                                        self.flushCode()
                                    }
                                }
                            })
                        }
                    })
                },
                emailLogin() {
                    let self = this;
                    //邮箱验证登录
                    $.ajax({
                        url: '/taobei_web/user/emailLogin',
                        type: 'post',
                        dataType: 'json',
                        data: self.emailLoginForm,
                        success(data) {
                            if (data.status == 200){
                                //登录成功，将用户信息保存到本地
                                window.sessionStorage.setItem("user", JSON.stringify(data.data));
                                //获取购物车商品数量显示
                                self.initCartNumber()
                                //弹出框隐藏
                                self.loginVisible = false
                                //重新进入首页
                                location.href = './userIndex4.html'
                            }else{
                                //提示用户错误信息
                                self.emailMsg = data.msg
                                self.flushCode()
                            }
                        }
                    })
                },
                handleClose(done) {
                    // this.$refs['loginForm'].resetField();
                    // this.$refs['emailLoginForm'].resetField();
                    done()
                },
                handleClick() {

                },
                initProductList() {
                    let self = this;
                    $.ajax({
                        url: '/taobei_web/pro/getIndexProduct',
                        type: 'get',
                        dataType: 'json',
                        success(data) {
                            self.productList = data.data
                            window.sessionStorage.setItem("productList",JSON.stringify(data.data))
                        }
                    })
                },
                clickBtn() {
                    alert("123")
                },
                addProductId(item){
                    //把商品id存储到session中
                    console.log(item)
                    $.ajax({
                        url: '/taobei_web/pro/addProductId',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            id: item.id
                        },
                        success(data) {
                            if (data.status == 200){
                                //跳转到商品详情页面
                                console.log("跳转页面.....")
                                location.href = './productDetails4.html'
                            }
                        }
                    })
                },
                monitor () {//监听关闭页面之后重新打开是否改继续倒计时
                    let LocalDelay = this.getLocalDelay()
                    let timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000)
                    if (timeLine > LocalDelay.delay) {
                        console.warn('倒计时过期')
                    } else {
                        this.countFlag = false
                        this.countNum = LocalDelay.delay - timeLine
                        let timer = setInterval(() => {
                            if (this.countNum > 1) {
                                this.countNum--
                                this.setLocalDelay(this.countNum)  //设置每一次还需倒计时
                            } else {
                                clearInterval(timer)
                                this.countFlag = true
                            }
                        }, 1000)
                    }
                },
                countDown () {
                    if (this.countFlag) {
                        this.countFlag = false
                        this.countNum = 180
                        let timer = setInterval(() => {
                            if (this.countNum > 1) {
                                this.countNum--
                                this.setLocalDelay(this.countNum)
                            } else {
                                clearInterval(timer)
                                this.countFlag = true
                            }
                        }, 1000)
                    } else {
                        return false
                    }
                },
                setLocalDelay (delay) {
                    // location.href作为页面的唯一标识，可能一个项目中会有多个验证码。
                    localStorage.setItem('delay_' + location.href, delay)
                    localStorage.setItem('time_' + location.href, new Date().getTime())
                },
                getLocalDelay () {
                    let LocalDelay = {
                        delay: localStorage.getItem('delay_' + location.href),
                        time : localStorage.getItem('time_' + location.href)
                    }
                    return LocalDelay
                },
                getVerifyCode () {
                    let self = this;
                    //获取验证码
                    $.ajax({
                        url: '/taobei_web/user/loginCode',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            tel: self.emailLoginForm.tel
                        },
                        success(data) {

                        }
                    })
                    if (this.countFlag) {
                        this.countDown() // 倒计时函数
                    }
                },
                initTypeList() {
                    let self = this;
                    $.ajax({
                        url: '/taobei_web/pro/queryAllProductType',
                        type: 'get',
                        dataType: 'json',
                        success(data) {
                            for (let index in data.data){
                                if (data.data[index].level == 1){
                                    self.typeList.push(data.data[index])
                                    if (self.typeList.length == 4)
                                        return
                                }
                            }
                        }
                    })
                    console.log(this.typeList)
                }
            },
            computed: {
              user() {
                  return JSON.parse(window.sessionStorage.getItem("user"));
              }
            },
            mounted() {
                //页面创建时获取商品首页数据
                this.initProductList();
                //页面创建时获取类型数据
                this.initTypeList();
                console.log(window.sessionStorage.getItem("user"))
                if (JSON.parse(window.sessionStorage.getItem("user")) != null ){
                    this.initCartNumber()
                }
            }
        })
    </script>
    <script>
        $(function(){

            $('#normal').mouseover(function(){

                //鼠标移入"显示"方块
                $('#show').show();
                $('#big').css("display","block")
                $(this).mousemove(function(ev){


                    //鼠标移动方块随着移动
                    $('#show').css({

                        'left':ev.pageX-$('#show').width()/2,
                        'top':ev.pageY-$('#show').height()/2

                    })

                    //防止方块移出图片内容
                    if($('#show').offset().top>$(this).height()-$('#show').height()){

                        $('#show').css('top',$(this).height()-$('#show').height());

                    }else if($('#show').offset().left>$(this).width()-$('#show').width()){

                        $('#show').css('left',$(this).width()-$('#show').width());

                    }else if($('#show').offset().bottom>$(this).height()-$('#show').height()){

                        $('#show').css('bottom',$(this).height()-$('#show').height());

                    }else if($('#show').offset().right>$(this).width()-$('#show').width()){

                        $('#show').css('right',$(this).width()-$('#show').width());

                    }

                    //在大容器显示放大图片
                    $('#big').find('img').css({

                        'left':-1200*$('#show').offset().left/300,
                        'top':-800*$('#show').offset().top/200

                    });

                });


            });

            //鼠标移出图片让方块"消失"
            $('#normal').mouseout(function(){
                $('#big').css("display","none")
                $('#show').hide();

            });

        });
    </script>
    <!--时间显示-->
    <script type="text/javascript">
        $(function () {
            var vWeek,vWeek_s,vDay;
            vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
            var date =  new Date();
            year = date.getFullYear();
            month = date.getMonth() + 1;
            day = date.getDate();
            hours = date.getHours();
            minutes = date.getMinutes();
            seconds = date.getSeconds();
            vWeek_s = date.getDay();
            $("#time").html( year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes +":" + seconds + "\t" + vWeek[vWeek_s] );

        })
        function time(){
            var vWeek,vWeek_s,vDay;
            vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
            var date =  new Date();
            year = date.getFullYear();
            month = date.getMonth() + 1;
            day = date.getDate();
            hours = date.getHours();
            minutes = date.getMinutes();
            seconds = date.getSeconds();
            vWeek_s = date.getDay();
            $("#time").html(year + "&nbsp;年&nbsp;&nbsp;" + month + "&nbsp;&nbsp;月&nbsp;&nbsp;" + day + "&nbsp;&nbsp;日&nbsp;&nbsp;" + "\t" + hours + ":" + minutes +":" + seconds + "\t" + vWeek[vWeek_s] );

        };
        setInterval("time()",1000);

    </script>
</body>

</html>